<template>
  <view class="content">
    <view class="">
      <c-navBar title="排课管理" showAdd @addClick="addScheduling"></c-navBar>
      <Filter @startSearch="startSearch" :compList="compList"></Filter>
    </view>
    <view class="content-bottom-style">
      <c-list
        v-model:loading="loading"
        v-model:error="error"
        error-text="请求失败，点击重新加载"
        @load="Loads"
        :finished="finished"
        class="scheduling-list-container"
      >
        <van-empty description="暂无数据" v-if="schedulingList.length === 0" />
        <view
          class="scheduling-card"
          v-for="(scheduling, index) in schedulingList"
          :key="index"
        >
          <view class="flex flex-a header">
            <view class="info-box">
              <view class="label">日期</view>
              <text class="value">{{ scheduling.day_time }}</text>
              <text class="tip">({{ scheduling.week }})</text>
            </view>
          </view>
          <view
            class="flex flex-sb list"
            v-for="(item, idx) in scheduling.plan_data"
            :key="idx"
          >
            <view class="flex">
              <view class="timerange">
                <text>{{ item.start_time }}-{{ item.end_time }}</text>
              </view>
              <view class="" style="margin-left: 30rpx">
                <view class="">
                  <text class="value">{{ item.teacher.teacher_nickname }}</text>
                  <text class="tip">(教练)</text>
                </view>
                <view>
                  <text class="value">{{ item.school.school_name }}</text>
                </view>
                <view
                  class=""
                  v-for="(user, udx) in item.teacher_plan_detail"
                  :key="udx"
                >
                  <text class="value">{{ user.user.username }}</text>
                  <text class="tip">(学生)</text>
                </view>
              </view>
            </view>
            <view class="action">
              <text
                class="type"
                :class="{
                  normal: item.plan_type === 1,
                  purple: item.plan_type === 2,
                  orange: item.plan_type === 3
                }"
                >{{ planType[item.plan_type] }}</text
              >
              <view class="mini-btn-box">
                <van-button
                  class="miniBtn"
                  color="#4E88E6"
                  size="mini"
                  @click.stop="edit(item)"
                  >编辑</van-button
                >
                <van-button
                  class="miniBtn ml-16"
                  color="#D43030"
                  size="mini"
                  @click.stop="deletescheduling(item)"
                  >删除</van-button
                >
              </view>
            </view>
          </view>
          <view class="operation flex flex-sb flex-a">
            <view class="total">
              【{{ scheduling.teacher_count }}个老师,
              {{ scheduling.teacher_count }} 个学生,
              {{ scheduling.hour_count }} 小时】
            </view>
            <!-- <view class="">
    	      <van-button
    	        class="defaultBtn"
    	        color="#4E88E6"
    	        size="mini"
    	        @click.stop="edit(scheduling)"
    	        >编辑</van-button
    	      >
    	      <van-button
    	        class="defaultBtn ml-16"
    	        color="#D43030"
    	        size="mini"
    	        @click.stop="deletescheduling(scheduling.)"
    	        >删除</van-button
    	      >
    	    </view> -->
          </view>
        </view>
      </c-list>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue"
import { getCurrentDate } from "@/utils"
import { onLoad, onShow } from "@dcloudio/uni-app"
import { getPlanList, delPlan } from "@/apis/coachManagement"
import { planType, classHours } from "@/utils/fieldMap"
import { showSuccessToast, showFailToast } from "vant"
import Filter from "@/components/filter/filter.vue"
const compList = ["school&teacger"]
const error = ref(false)
const loading = ref(false)

const finished = ref(true)
const schedulingList = ref([])
const queryParams = reactive({
  start_date: "2024-08-01", // getCurrentDate()
  end_date: getCurrentDate(),
  school_data: "",
  teacher_data: ""
})
onShow(() => {
  Loads()
})
const startSearch = (query) => {
  queryParams.start_date = query.dateRange[0] || ""
  queryParams.end_date = query.dateRange[1] || ""
  queryParams.school_data = query.school_data
  queryParams.teacher_data = query.teacher_data
  Loads()
}
const Loads = () => {
  getList()
}
const getList = () => {
  loading.value = true
  getPlanList(queryParams)
    .then((res) => {
      if (res.code === 1) {
        schedulingList.value = res.data
        loading.value = false
      } else {
        error.value = true
        loading.value = false
      }
    })
    .catch((err) => {
      error.value = true
      loading.value = false
    })
}
const search = ({ dateRange, keyword }) => {
  Loads()
}

const del = (plan_sn) => {
  delPlan({
    plan_sn: plan_sn
  }).then((res) => {
    uni.showSuccessToast("删除成功！")
    Loads()
  })
}
const deletescheduling = (item) => {
  uni.showModal({
    title: "提示",
    content: "确认删除该排课信息吗？",
    success: function (res) {
      if (res.confirm) {
        del(item.plan_sn)
        console.log("用户点击确定")
      } else if (res.cancel) {
        console.log("用户点击取消")
      }
    }
  })
}
const addScheduling = () => {
  uni.navigateTo({
    url: `/pages/coachManagement/addScheduling`
  })
}
const edit = (item) => {
  uni.navigateTo({
    url: `/pages/coachManagement/addScheduling?plan_sn=${item.plan_sn}`
  })
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.content-bottom-style {
  width: 100%;
  flex: 1;
  overflow: hidden;
}

.scheduling-list-container {
  padding: 70rpx 20rpx;
  // height: calc(100vh - 302rpx);

  .scheduling-card {
    border-radius: 5px;
    padding: 30rpx 0 20rpx 0;
    border: 1px solid rgba(236, 236, 236, 1);
    margin-bottom: 20rpx;

    .header {
      padding-bottom: 18rpx;
      margin: 0 30rpx 0 20rpx;
      border-bottom: 1px solid rgba(229, 229, 229, 1);

      .info-box {
        display: flex;
        align-items: baseline;

        .label {
          font-size: 28rpx;
          color: rgba(51, 51, 51, 1);
        }
      }
    }

    .list {
      padding: 36rpx 30rpx 36rpx 20rpx;

      .action {
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        .type {
          font-size: 24rpx;
          margin-bottom: 20rpx;
        }
      }
    }

    .timerange {
      margin-top: 2px;
    }

    .value {
      font-size: 28rpx;
      color: rgba(153, 153, 153, 1);
      margin-left: 12rpx;
    }

    .tip {
      font-size: 20rpx;
      color: rgba(153, 153, 153, 1);
      margin-left: 3px;
    }
  }
}

.operation {
  padding: 20rpx 30rpx 0 22rpx;
  border-top: 1px solid rgba(236, 236, 236, 1);

  .total {
    font-size: 24rpx;
  }
}

.miniBtn {
  width: 72rpx;
  height: 32rpx;
  font-size: 20rpx;
  border-radius: 5px;
  transform: scale(0.9);
}

.mini-btn-box {
}

.defaultBtn {
  font-size: 24rpx;
  width: 92rpx;
  height: 42rpx;
}

.ml-21 {
  margin-left: 54rpx;
}

.ml-16 {
  margin-left: 22rpx;
}
</style>
